<template>
  <div id="vditorPreview"></div>
  <!-- eslint-disable vue/no-v-html -->
<!--  <div v-html="getHtmlData" :class="$props.class" class="markdown-viewer"></div>-->
</template>

<script lang="ts" setup>
  import { computed,onMounted } from 'vue';
  import showdown from 'showdown';
  import Vditor from 'vditor';

  const converter = new showdown.Converter();
  converter.setOption('tables', true);
  const props = defineProps({
    value: { type: String },
    class: { type: String },
  });
  // const getHtmlData = computed(() => converter.makeHtml(props.value || ''));
  onMounted(() => {
    Vditor.preview(document.getElementById('vditorPreview'), props.value || '');
  })
</script>

<style lang="less" scoped>
  .markdown-viewer {
    width: 100%;
    border: 2px solid #0b79ee;
    padding: 10px;
    h1 {
      font-size: 16px !important;
      color: #0a6cd5;
    }
  }
</style>
